<template>
  <a-drawer v-model:visible="visible" title="摄像头信息编辑" placement="right" :width="450">
    <a-form ref="formRef" :model="model" :rules="rules" :label-col="{ span: 8 }" @finish="onFinish">
      <a-form-item label="报警级别" name="level">
        <a-input v-model:value="model.level" placeholder="请输入报警级别" />
      </a-form-item>
      <a-form-item label="告警类型" name="alarmType">
        <JDictSelectTag v-model:value="model.alarmType" placeholder="请选择告警类型" dictCode="alarm_type" allowClear />
      </a-form-item>
      <a-form-item label="处理时间" name="handleTime">
        <a-date-picker
          v-model:value="model.handleTime"
          show-time
          placeholder="请输选择处理时间"
          format="YYYY-MM-DD HH:mm:ss"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="设备信息" name="equipmentCode">
        <a-select v-model:value="model.equipmentCode" placeholder="请选择设备信息">
          <template v-for="(vo, idx) in equipmentList" :key="idx">
            <a-select-option :value="vo.equipmentCode">
              {{ vo.name }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="站点编号" name="stationCode">
        <StationSelect v-model:value="model.stationCode" />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <JDictSelectTag v-model:value="model.status" placeholder="请选择状态" dictCode="alarm_status" allowClear />
      </a-form-item>
      <!-- <a-form-item label="处理备注" name="handleRemark">
        <a-textarea v-model:value="model.handleRemark" allowClear placeholder="请输入处理备注" :rows="4" />
      </a-form-item>
      <a-form-item label="处理结果" name="handleResult">
        <a-textarea v-model:value="model.handleResult" allowClear placeholder="请输入处理结果" :rows="4" />
      </a-form-item> -->
      <a-form-item label="操作">
        <a-button @click="resetForm">重置</a-button>
        <a-divider type="vertical" />
        <a-button type="primary" html-type="submit">提交保存</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts">
import { watch, ref, defineComponent, getCurrentInstance } from 'vue';
import { JDictSelectTag } from '/@/components/Form';
import { StationSelect } from '/@/components/StationSelect';
import { alarmAddApi, alarmModifyApi, alarmInfoApi } from '/@/api/alarm/index';
import { equipmentListApi } from '/@/api/equipment';
export default defineComponent({
  components: { JDictSelectTag, StationSelect },
  setup(props, { emit }) {
    let { proxy } = getCurrentInstance();
    let visible = ref(false);
    let model = ref({
      // 报警级别
      level: '',
      // 报警类型
      alarmType: '',
      // 处理时间
      handleTime: '',
      // 设备编码
      equipmentCode: '',
      // 处理备注
      handleRemark: '',
      // 处理结果
      handleResult: '',
      // 站点编码
      stationCode: '',
      // 状态
      status: '',
    });

    let rules = ref({
      level: [{ required: true, message: '请选择报警级别' }],
      alarmType: [{ required: true, message: '请选择报警类型' }],
      handleTime: [{ required: true, message: '请选择处理时间' }],
      equipmentCode: [{ required: true, message: '请选择设备信息' }],
      mn: [{ required: true, message: '请输入设备编码' }],
      stationCode: [{ required: true, message: '请选择站点编码' }],
      status: [{ required: true, message: '请输入状态' }],
    });

    // 设备列表
    let equipmentList = ref([]);

    /**
     * 初始化数据
     * @param {number} id
     */
    function init(id) {
      alarmInfoApi({ id }).then((res) => {
        model.value = { ...res };
      });
    }

    /**
     * 初始化设备列表
     */
    function initEquipmentList() {
      equipmentListApi({}).then((res) => {
        equipmentList.value = res;
      });
    }

    function resetForm() {
      proxy.$refs.formRef.resetFields();
    }

    function onFinish() {
      let data = {
        ...model.value,
      };
      if (!data['id']) {
        alarmAddApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          emit('oks');
        });
      } else {
        alarmModifyApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          emit('oks');
        });
      }
    }

    watch(
      () => visible.value,
      (v) => {
        if (v) {
          initEquipmentList();
        }
        if (!v) {
          delete model.value.id;
          model.value = {
            // 报警级别
            alarmLevel: '',
            // 报警类型
            alarmType: '',
            // 决策id
            decisionId: '',
            // 处理时间
            handleTime: '',
            // 设备编码
            mn: '',
            // 站点编码
            stationCode: '',
            // 状态
            status: '',
          };
        }
      },
      { deep: true }
    );

    return {
      init,
      visible,
      model,
      rules,
      equipmentList,
      resetForm,
      onFinish,
    };
  },
});
</script>